
.ui-doc {

  &:not(:first-of-type) {
    margin-top: 30px;
  }

  &:hover {
    .doc-body {
      box-shadow: 0 3px 6px rgba(0,0,0,.07);
    }
  }

  .doc-title {
    padding-left: 5px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: #333;
  }

  .doc-body {
    border: 1px solid #eee;

    .doc-demo {
      padding: 15px;

      &:before {
        content: 'Demo';
        display: block;
        /*background-color: #F8F8F8;*/
        color: #bbb;
        text-transform: uppercase;
        margin: -15px -15px 15px;
        padding: 4px 6px;
        font-size: 12px;
      }

      .demo-inline {
        margin-bottom: 5px;

        &.center {
          text-align: center;
        }

        button {
          margin-right: 5px;
          margin-bottom: 5px;
        }
      }
    }

    .doc-code {
      padding: 5px;
      border-top: 1px solid #eee;
      background-color: #F8F8F8;
  
      > .code-bar {
        color: #bbb;
        text-transform: uppercase;
        margin: -5px -5px 0;
        padding: 4px 6px 3px 6px;
        font-size: 12px;
        cursor: pointer;
      }

      pre {
        margin: 0;
        width: auto;
        animation: fade-enter .3s;
        
        code {
          -webkit-overflow-scrolling: touch;
        }
      }
    }
  }
}

/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */

/* Tomorrow Comment */
.hljs-comment,
.hljs-quote {
  color: #8e908c;
}

/* Tomorrow Red */
.hljs-variable,
.hljs-template-variable,
.hljs-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-regexp,
.hljs-deletion {
  color: #c82829;
}

/* Tomorrow Orange */
.hljs-number,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params,
.hljs-meta,
.hljs-link {
  color: #f5871f;
}

/* Tomorrow Yellow */
.hljs-attribute {
  color: #eab700;
}

/* Tomorrow Green */
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition {
  color: #718c00;
}

/* Tomorrow Blue */
.hljs-title,
.hljs-section {
  color: #4271ae;
}

/* Tomorrow Purple */
.hljs-keyword,
.hljs-selector-tag {
  color: #8959a8;
}

.hljs {
  display: block;
  overflow-x: auto;
  background: white;
  color: #4d4d4c;
  padding: 0.5em;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

